<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas :areas="treeAreas" :area-type="areaType" v-on:handleNodeClick="onHandleNodeClick"/>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <div class="filter-container">
            <el-input clearable style="margin-left: 20px;width: 140px" class="filter-item" v-model="listQuery.device_number" placeholder="终端编号"></el-input>
            <el-select style="margin-left: 20px;width: 110px" class="filter-item" clearable v-model="listQuery.type" placeholder="日志分类">
              <el-option
                v-for="item in catalog"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker class="filter-item" style="margin-left:20px" clearable
                            v-model="listQuery.date_range"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
            </el-date-picker>
            <el-button  style="margin-left:40px" class="filter-item" type="primary" icon="el-icon-search"
                       @click="getDeviceLogs">
              查询
            </el-button>
          </div>
          <div class="app-container">
            <el-table
              :key="tableKey"
              v-loading="listLoading"
              :data="list"
              ref="equipTable"
              border
              fit
              stripe
              highlight-current-row
              :row-style="{height:40+'px'}"
              :cell-style="{padding:0+'px'}"
              style="width: 100%;"
              height="700"
            >
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column label="类型" align="center" width="80">
                <template slot-scope="{row}">
                  <span>{{ formatCatalog(row.catalog) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="终端编号" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.terminal_number || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属用户" align="center" width="200">
                <template slot-scope="{row}">
                  <span>{{ row.area_name || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="记录" align="center" width="400">
                <template slot-scope="{row}">
                  <span>{{ row.content || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作人" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.operator}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作时间" align="center">
                <template slot-scope="{row}">
                  <span>{{ formatDate(row.create_time) }}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                        @pagination="getDeviceLogs"/>
          </div>n
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree';
import Pagination from '@/components/Pagination';
import {getLogs} from "@/api/device";
import {getAreaTree} from "@/api/area";
import {checkPermission} from "@/utils/permission";
import jsUtils from 'jutils-src'

const typeMap = [{name:'添加',value:1},{name:'修改',value:2},{name:'删除',value:3},{name:'更换设备',value:4},{name:'下发指令',value:5}]


export default {
  name: 'device-operate',
  components: {areas, Pagination},
  data() {
    return {
      tableKey: 0,
      deviceLogs: [],
      listLoading: true,
      list: [],
      catalog:typeMap,
      areaType: 2,
      treeAreas:[],
      total: 0,
      listQuery: {
        area_code: '',
        device_number: '',
        date_range: [],
        type:'',
        page: 1,
        pageSize: 20,
      }
    };
  },
  created() {
    this.getDeviceLogs()
    this.getAreaTree()
  },
  methods: {
    checkPermission,
    getAreaTree(){
      getAreaTree({type:2}).then(response => {
        this.treeAreas = response.data
      })
    },
    onHandleNodeClick: function (data) {
      if (this.listQuery.area_code != data.code) {
        this.listQuery.area_code = data.code
        this.getDeviceLogs()
      }
    },
    getDeviceLogs() {
      this.listLoading = true
      let queryData = Object.assign({},this.listQuery)
      queryData.type = parseInt(queryData.type)
      getLogs(queryData).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    formatCatalog(catalog){
      switch (catalog){
        case 1:
          return '添加'
        case 2:
          return '修改'
        case 3:
          return '删除'
        case 4:
          return '更换设备'
        case 5:
          return '下达指令'
        default:
          return '-'
      }
    },
    formatDate(dateStr) {
      const d = new Date(dateStr)
      if(d.getMilliseconds() == 0){
        return '-'
      }
      return jsUtils.formatDate(d,'YYYY-MM-DD HH:ii:ss')
    },
    resetQueryParams() {
      this.listQuery = {
        id: 0,
        page: 1,
        pageSize: 20,
        name: ''
      }
    }
  }
}
</script>
